.mk-invoiceviewer-toolbar {
    --icon-color: #fff;
    --bar-bg-color: #333c;
    --divider-color: #e8e8e8;

    &.theme-light {
        --bar-bg-color: #f7f7f7;
        --icon-color: #3c3f42;
        --divider-color: #ced4d8;
    }

    display: flex;
    height: 44px;
    background-color: var(--bar-bg-color);
    align-items: center;
    padding: 0 16px;

    .toolbar-box {
        color: #fff;
    }

    .toolbar-box+.toolbar-box {
        margin-left: 8px;
    }

    &_icon-panel {
        display: flex;
        flex: 1;
        justify-content: center;
    }

    &_left {
        display: flex;
        align-items: center;
        padding-left: 16px;
    }

    &_right {
        display: flex;
        align-items: center;
        position: relative;


    }

    &_left+&_right {
        &:before {
            display: block;
            width: 1px;
            top: 0;
            bottom: 0;
            margin: auto;
            position: absolute;
            left: 0;
            background-color: var(--divider-color);
            height: 16px;
            content: '',
        }
    }

    &_close {
        margin-left: 16px;
    }

    &_left+&_right {
        margin-left: 32px;
        padding-left: 32px;
    }


    .toolbar-icon {
        font-size: 17px;
        color: var(--icon-color);
        cursor: pointer;
        position: relative;

        &-label {
            font-size: 12px;
            position: relative;
            top: -2px;
            margin-left: 6px;
        }

        &-popover {
            background-color: #fff;

            &_arrow {
                width: 8px;
                height: 8px;
                background: transparent;
                border-width: 4px;
                border-style: solid;
                box-sizing: border-box;
            }
        }
    }

    .toolbar-icon+.toolbar-icon {
        margin-left: 16px;
    }
}